<template>
	<div>
		<div class="table">
			<el-table
				:data="tableData"
				border
				:header-cell-style="{
					background: 'rgb(188,222,233)',
					height: '60px',
					fontSize: '18px',
					fontWeight: 'bolder',
				}"
				:cell-style="{ fontSize: '14px' }"
			>
				<el-table-column fixed  prop="username" label="用户名" width="200">
				</el-table-column>
        <!-- <el-table-column prop="password" label="密码" width="200">
				</el-table-column> -->
				<el-table-column prop="realname" label="姓名" width="200">
				</el-table-column>
				<el-table-column prop="student_num" label="学号" width="200">
				</el-table-column>
				<el-table-column prop="role" label="当前权限" width="300">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250">
					<template slot-scope="scope">
						<el-button @click="edPerson(scope.row)" type="text">修改权限</el-button>
						<el-button @click="dePerson(scope.row)" type="text">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="bbb">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:page-size="pageSize"
					:total="total"
					@current-change="page"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import baseUrl from "../../utils/baseURL";
	export default {
		data() {
			return {
				// id: "",
				username: "",
				// password: "",
				realname: "",
				student_num: "",
				role: "",
				total: null,
				tableData: null,
				pageNum: 1,
				pageSize: 7,
			};
		},
		methods: {
			edPerson(row) {
				console.log(row);
				this.$router.push({
					path: "/updateUser",
				});
				window.localStorage.setItem("nowUser", JSON.stringify(row));
				// console.log(window.localStorage.getItem("nowUser"));
			},
			dePerson(row) {
				const _this = this;
				this.$confirm("此操作将删除该用户信息, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						axios
							.post(baseUrl + "/sys/deleteUser", {
								username:row.username
							})
							.then(function (resp) {
								_this.$alert("删除成功", "消息", {
									confirmButtonText: "确定",
									callback: (action) => {
										window.location.reload();
									},
								});
							});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			page(currentPage) {
				const _this = this;
				axios
					.post(baseUrl+"/sys/selectUserPage", {
						pageNum: currentPage,
						pageSize: 7,
					})
					.then(function (resp) {
						_this.tableData = resp.data.data.records;
						_this.total = resp.data.data.total;
					});
			},
		},
		created() {
			const _this = this;
			axios({
				method: "post",
				url: baseUrl+"/sys/selectUserPage",
				data: {
					pageNum: 1,
					pageSize: 7,
				},
			}).then(function (resp) {
				console.log(resp);
				_this.tableData = resp.data.data.records;
				_this.total = resp.data.data.total;
			});
		},
	};
</script>

<style scoped>
	.table {
		margin-top: 50px;
		width: 100%;
		text-align: center;
	}

	.el-table {
		margin: auto;
		max-width: 80%;
	}

	.bbb {
		margin: auto;
		max-width: 80%;
		text-align: left;
	}

	.el-button {
		font-size: 14px;
	}
</style>